/**
* @description: 已办工单 ==> 已办工单（我完成的）==> 工单详情
**/
<template>
  <view class="task-monitor-main">
    <nav-bar class="header" back title="计划工单详情" @goBack="goBack" />
    <view class="main-container">
      <!--基本信息-->
      <plateTitle title="工单详情" class="plate-title-1" />
      <view class="base-info-container">
        <van-cell-group>
          <view v-for="(item, index) in baseInfoData" :key="index">
            <van-cell v-if="item.show" :title="item.title" :value="item.value"/>
          </view>
        </van-cell-group>
      </view>

      <!--巡视进度-->
      <plateTitle title="巡视详情" class="plate-title-2">
        <span class="plate-title-right" style="color: #41DC83" @click="toEquipList">
          {{ taskStatus }}（{{ taskProgress }}）
          <van-icon name="arrow" />
        </span>
      </plateTitle>
      <!--  已完工  -->
      <view class="finish" v-for="(item,index) in progessList" :key="index">
        <view class="progesss-top">
          <view class="progess-left">
            <img src="../../../static/img/equipment.png" alt="" v-if="item.DET_TYPE_NAME === '通信设备'">
            <img src="../../../static/img/opticalCable.png" alt="" v-if="item.DET_TYPE_NAME === '通信光缆'">
            <img src="../../../static/img/powerSupply.png" alt="" v-if="item.DET_TYPE_NAME === '通信电源'">
            <text class="progess-title">{{ item.DET_TYPE_NAME }}</text>
          </view>
          <!-- {{item.DET_TYPE}} -->
          <view class="progess-right">已完成 ({{item.YWC }}/{{item.TOTAL}})</view>
        </view>
        <hr class="progess-hr">
        <view class="progesss-bottom xsry">
          <text class="progress-title">巡视人员：</text>
          <text class="progress-main">{{item.XSRY}}</text>
        </view>
        <view class="progesss-bottom">
          <text class="progress-title">巡视设备数：</text>
          <text class="progress-main">{{item.TOTAL}}</text>
          <text class="progress-title ml">异动设备数：</text>
          <text class="progress-main colorNum">{{item.XZ + item.GX + item.BCZ}}</text>
        </view>
        <view class="task-bottom">
          <text class="task-box add-box">新增：{{item.XZ}}</text>
          <text class="task-box update-box">更新：{{item.GX}}</text>
          <text class="task-box consistent-box">一致：{{item.YZ}}</text>
          <text class="task-box nonentity-box">不存在：{{item.BCZ}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import navBar from '../../../components/common/nav-bar.vue'
import plateTitle from '../../../components/business/plateTitle'
import moment from 'moment'
import {mapGetters} from "vuex";
export default {
  components: { navBar, plateTitle },
  data() {
    return {
      baseInfoData: [
        {
          title: '工单名称',
          key: 'NAME',
          value: '',
          show: true,
        },
        {
          title: '巡视站点名称',
          key: 'TASK_SITE_NAME',
          value: '',
          show: true,
        },
        {
          title: '计划开工时间',
          key: ['JHKSSJ', 'JHJSSJ'],
          value: '',
          show: false,
        },
        {
          title: '负责人',
          key: 'FZR',
          value: '',
          show: false,
        },
        {
          title: '计划巡视时间',
          key: ['JHXSKSSJ', 'JHXSJSSJ'],
          value: '',
          show: true,
        },
        {
          title: '巡视负责人',
          key: 'XSFZR',
          value: '',
          show: true,
        },
        {
          title: '实际巡视时间',
          key: ['XSKSSJ', 'XSJSSJ'],
          value: '',
          show: true,
        },
        {
          title: '备注',
          key: 'REMARK',
          value: '',
          show: true,
        }
      ],
      taskStatus: '已完工',
      taskProgress: '/',
      progessList: [],
      taskId: '',
      taskState: '',
    }
  },
  onLoad(e) {
    this.taskId = e.OBJ_ID
    this.taskState = e.TASK_STATE
  },
  mounted() {
    this.getDataDetail()
  },
  computed: {
    ...mapGetters(['userData'])
  },
  methods: {
    getDataDetail() {
      this.$api.patrolTaskApi
        .taskDetails({ task_id: this.taskId, task_state: this.taskState, userId: this.userData.userId })
        .then(res => {
          if (res.code == 0) {
            let data = res.data.taskMsg
            this.baseInfoData.map(item => {
              if (Array.isArray(item.key)) {
                item.value =
                  moment(data[item.key[0]]).format('YYYY-MM-DD HH:mm') +
                  '～' +
                  moment(data[item.key[1]]).format('YYYY-MM-DD HH:mm')
              } else {
                item.value = data[item.key]
              }
              // 临时工单中两个字段不显示
              ((item.title === "计划开工时间" || item.title === "负责人") && data.TASK_TYPE === '2') ? item.show = false : item.show = true;
            })
            this.progessList = res.data.task_details

            var ywc = 0
            var total = 0
            this.progessList.map(item => {
              ywc += Number(item.YWC)
              total +=  Number(item.TOTAL)
            })
            this.taskProgress = ywc + '/' + total
          }
        })
    },
    toEquipList() {
      uni.navigateTo({
        url: `/pages/workBench/completedTask/equipmentList?task_id=${this.taskId}&taskState=${this.taskState}`
      })
    },
    goBack() {
      // uni.navigateBack()
      uni.navigateTo({
        url: '/pages/workBench/completedTask/completedTask'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.task-monitor-main {
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }

  .main-container {
    min-height: calc(100vh - #{px2vh(283)});
    padding: px2vh(30) px2vw(30) px2vh(90) px2vw(30);
    background-color: #f8f8f8;
    /deep/.van-cell {
      font-size: px2vw(42);
    }

    .plate-title-1 {
      margin-top: px2vh(30);
      margin-bottom: px2vh(27);
    }

    .base-info-container {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #ffffff;

      /deep/.van-cell__title {
        color: #666;
      }
      /deep/.van-cell__value {
        color: #333;
      }
    }

    .plate-title-2 {
      margin-top: px2vh(60);
      margin-bottom: px2vh(27);

      .plate-title-right {
        line-height: px2vh(54);
        font-size: px2vw(40);
        font-weight: bold;

        .van-icon {
          vertical-align: middle;
          color: #9a9a9a;
        }
      }
    }
  
    .finish {
      width: px2vw(1020);
      //height: px2vh(500);
      background: #fff;
      margin-bottom: px2vh(30);
      padding-bottom: px2vh(30);
      border-radius: 10px;
      .progesss-top {
        width: px2vw(920);
        height: px2vh(172);
        margin-left: px2vw(50);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .progess-left {
          display: flex;
          align-items: center;
          img {
            width: px2vw(68);
            height: px2vw(68);
            //margin-top: px2vh(55);
            //float: left;
          }
        
          .progess-title {
            color: #666;
            //float: left;
            font-size: px2vw(42);
            margin-left: px2vw(20);
            //margin-top: px2vh(58);
            //line-height: px2vh(62);
          }
        }
        .progess-right {
          //width: px2vw(300);
          font-size: px2vw(42);
          //line-height: px2vh(62);
          //margin-top: px2vh(58);
          //float: right;
          color: #41DC83;
        }
        .processColor {
          color: #FF4355;
        }
        .processColor2 {
          color: #FFAD0E;
        }
      }
      .progess-hr {
        width: px2vw(920);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
      }
      .progesss-bottom {
        width: px2vw(920);
        margin-left: px2vw(50);
        font-size: px2vw(36);
      
        .progress-title {
          display: inline-block;
          margin-top: px2vh(44);
          color: #666;
        }
        .progress-main {
          display: inline-block;
          margin-top: px2vh(44);
          color: #333;
        }
        .ml {
          margin-left: px2vw(217);
        }
        .colorNum {
          color: #FF4355;
        }
      }
      .progesss-bottom.xsry {
        display: flex;
        .progress-title {
          width: px2vw(190);
        }
        .progress-main {
          flex: 1;
        }
        .ml {
          margin-left: px2vw(217);
        }
        .colorNum {
          color: #FF4355;
        }
      }
      .task-bottom {
        width: px2vw(920);
        height: px2vh(66);
        margin-left: px2vw(50);
        margin-top: px2vh(40);
        font-size: px2vw(36);
        .task-box {
          display: inline-block;
          width: px2vw(206);
          height: px2vh(60);
          line-height: px2vh(62);
          font-size: px2vw(32);
          text-align: center;
        }
        .add-box {
          color: #41DC83;
          background: rgba(65,220,131, 0.1);
        }
        .update-box {
          color: #FFAD0E;
          margin-left: px2vw(32);
          background: rgba(255,180,0, 0.1);
        }
        .consistent-box {
          color: #417ADC;
          margin-left: px2vw(32);
          background: rgba(65,122,220, 0.1);
        }
        .nonentity-box {
          color: #FF7070;
          margin-left: px2vw(32);
          background: rgba(255,112,112, 0.1);
        }
      }
    }
  }
}
</style>